<template>
	<view class="container">
		<view class="uni-list">
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="uni-list-cell-db">车牌号</view>
				<input class="plate" type="text" v-model="plate" placeholder="请输入车牌号">
			</view>
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="uni-list-cell-db">
					商品图片
					<view class="showimg_box">
						<view v-for="(item,index) in imgList" :key="index" class=" imgarr">
							<view class="icon-cuo" @tap="delect(index)">
								<view v-for="(value,index) in iconType" :key="index">
									<icon :type="value" size="18" color="#000" style="vertical-align: top;" />
								</view>
							</view>
							<image class="images" :src="item" @click="lookImg(index)"></image>
						</view>
						<view class="show_img">
							<image :src="pingjiaSrc" @tap="ChooseImage"></image>
						</view>
					</view>

				</view>
			</view>
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="uni-list-cell-db">
					商品名称
					<view class="p">
						适用于汽车LED大灯解码器奔驰宝马福克沃尔沃大众晚
						唐一体超亮
					</view>
				</view>
			</view>
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="uni-list-cell-db">商品数量</view>
				<text>1件</text>
			</view>
		</view>
		<view class="bottom">
			<button type="primary">确定</button>
		</view>

	</view>
</template>


<script>
	export default {
		data() {
			return {
				iconType: ['cancel'],
				imgList: [],
				imgArr: "",
				// pingjiaSrc: "../../../static/images/up2.png",
			}

		},
		onLoad() {
			// 模拟动态赋值
			setTimeout(() => {
				this.rateValue = 3
			}, 1000)
		},
		methods: {
			ChooseImage() {
				var _this = this;
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择和拍照
					success: (res) => {
						var tempFilePaths = res.tempFilePaths;
						if (_this.imgList.length + tempFilePaths.length > _this.imgMaxNum) {
							uni.showToast({
								title: '超过上传图片的最大数量',
								icon: 'none'
							})
						} else {
							if (_this.imgList.length != 0) {
								_this.imgList = _this.imgList.concat(res.tempFilePaths);
							} else {
								_this.imgList = res.tempFilePaths;
							}
							for (var i = 0; i < tempFilePaths.length; i++) {
								let timestamp = new Date().getTime();
								let enMsg = hex_md5('@' + hex_md5('@' + timestamp + '~') + '~');
								uni.uploadFile({
									url: this.adminIp + 'Interface/Interface/UploadImg', //上传的服务器地址
									filePath: tempFilePaths[i],
									method: 'POST',
									name: "file",
									formData: {
										timestamp: timestamp,
										enMsg: enMsg
									},
									success: res => {
										let img = JSON.parse(res.data).data
										_this.imgArr += img + ","
										console.log("上传图片", _this.imgArr);
									}
								});
							}
						}
					}
				});
			},
			//查看图片
			lookImg: function(val) {
				const urls = this.imgList
				const current = val
				uni.previewImage({
					urls,
					current
				})
			},
			delect(index) {
				uni.showModal({
					title: "提示",
					content: "是否要删除该图片",
					success: (res) => {
						if (res.confirm) {
							this.imgList.splice(index, 1)
						}
					}
				})
			},
		}
	}
</script>

<style>
	.uni-list::before{
		display: none;
	}
	.uni-list::after {left: 30rpx;}
	.uni-list text{color: #A8A8A8;}
	.uni-list .p {
		color: #666666;margin-top: 15rpx;
	}

	.container .bottom {
		position: fixed;
		z-index: 99;
		left: 0;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 70rpx;
	}
	
	.plate {
		text-align: right;
	}

	.showimg_box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

	}

	.images {
		width: 208rpx;
		height: 208rpx;
	}

	.imgarr {
		display: flex;
		align-items: center;
		position: relative;
		margin: 20rpx 20rpx 0 0;
	}

	.icon-cuo {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 998;
	}
</style>
